<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="工程id">
              <a-input placeholder="请输入工程id" v-decorator="['fdProjid', validatorRules.fdProjid ]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="工程名称">
              <a-input placeholder="请输入工程名称" v-decorator="['fdProjname', validatorRules.fdProjname ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="工程描述">
              <a-input placeholder="请输入工程描述" v-decorator="['fdProjdesc', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="上线日期">
              <a-date-picker
                placeholder="请输入上线日期"
                style="width:100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="[ 'fdProjupdate', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="负责公司">
              <a-input placeholder="请输入负责公司" v-decorator="['fdProjcompany', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="行内维护人员">
              <a-input placeholder="请输入行内维护人员" v-decorator="['fdInneroperation', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="合作公司联系人">
              <a-input placeholder="请输入合作公司联系人" v-decorator="['fdOutoperaction', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="工程类型">
              <a-input placeholder="请输入工程类型" v-decorator="['fdProjtype', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="行内维护人员电话">
              <a-input placeholder="请输入行内维护人员电话" v-decorator="['fdMaintainerphone', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="开发人员">
              <a-input placeholder="请输入开发人员" v-decorator="['fdEmpolder', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="开发人员电话">
              <a-input placeholder="请输入开发人员电话" v-decorator="['fdEmpolderphone', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="业务人员">
              <a-input placeholder="请输入业务人员" v-decorator="['fdBusiness', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="业务人员电话">
              <a-input placeholder="请输入业务人员电话" v-decorator="['fdBusinessphone', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="应用工程对应用户表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="sysProjectAuthTable.loading"
            :columns="sysProjectAuthTable.columns"
            :dataSource="sysProjectAuthTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import {initDictOptions,counstDictData, filterDictText} from '@/components/dict/JDictSelectUtil'

  export default {
    name: 'SysProjectModal',
    mixins: [JEditableTableMixin],
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          fdProjid: { rules: [{ required: true, message: '请输入工程id!' }] },
          fdProjname: { rules: [{ required: true, message: '请输入工程名称!' }] },
        },
        refKeys: ['sysProjectAuth', ],
        activeKey: 'sysProjectAuth',
        // 应用工程对应用户表
        sysProjectAuthTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '用户id',
              key: 'fdUserid',
              type: FormTypes.select,
              defaultValue: '',
              options: [],
              placeholder: '请输入${title}',
              validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '授权',
              key: 'fdProjauth',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
          ]
        },
        url: {
          add: "/pubmgr/sysProject/add",
          edit: "/pubmgr/sysProject/edit",
          sysProjectAuth: {
            list: '/pubmgr/sysProject/querySysProjectAuthByMainId'
          },
        }
      }
    },
    methods: {
 
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'fdProjid', 'fdProjname', 'fdProjdesc', 'fdProjupdate', 'fdProjcompany', 'fdInneroperation', 'fdOutoperaction', 'fdProjtype', 'fdMaintainerphone', 'fdEmpolder', 'fdEmpolderphone', 'fdBusiness', 'fdBusinessphone', 'createUser', 'updateUser', 'isDetele', ))
          // 时间格式化
          this.form.setFieldsValue({ fdProjupdate: this.model.fdProjupdate ? moment(this.model.fdProjupdate) : null })
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.fdProjid }
          this.requestSubTableData(this.url.sysProjectAuth.list, params, this.sysProjectAuthTable)
        }
      },
 
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        //时间格式化
        main.fdProjupdate = main.fdProjupdate ? main.fdProjupdate.format('YYYY-MM-DD HH:mm:ss') : null;
        return {
          ...main, // 展开
          sysProjectAuthList: allValues.tablesValue[0].values,
        }
      },
      async initDictConfig(){
        initDictOptions('sys_user,realname,id').then((res) => {
          if (res.success) {
            this.sysProjectAuthTable.columns[0].options = counstDictData(res.result);
          }
        });
      }
    },
    async created() {
      //初始化字典配置 在自己页面定义
      this.initDictConfig();
    }
  }

</script>

<style scoped>
</style>